<!DOCTYPE html>

<html>
<head>
    <title>DevExtreme jQuery Example</title>

    <link rel="stylesheet" type="text/css" href="../artifacts/css/dx.common.css"/>

    <link rel="stylesheet" type="text/css" href="../artifacts/css/dx.light.css"/>

    <script type="text/javascript" src="../vendor/jquery/jquery-3.1.0.js"></script>

    <script type="text/javascript" src="../vendor/knockout/knockout-3.4.0.debug.js"></script>

    <!--<script type="text/javascript" src="../vendor/cldr/cldr.js"></script>
    <script type="text/javascript" src="../vendor/cldr/cldr/event.js"></script>
    <script type="text/javascript" src="../vendor/cldr/cldr/supplemental.js"></script>
    <script type="text/javascript" src="../vendor/cldr/cldr/unresolved.js"></script>
    <script type="text/javascript" src="../vendor/globalize/globalize.js"></script>
    <script type="text/javascript" src="../vendor/globalize/globalize/currency.js"></script>
    <script type="text/javascript" src="../vendor/globalize/globalize/date.js"></script>
    <script type="text/javascript" src="../vendor/globalize/globalize/message.js"></script>
    <script type="text/javascript" src="../vendor/globalize/globalize/number.js"></script>-->

    <script type="text/javascript" src="../artifacts/js/dx.all.debug.js"></script>
</head>

<body>
    <div data-bind="dxButton: buttonOptions"></div>

    <script>
        $(function() {
            var viewModel = {
                buttonOptions: {
                    text: 'Click me!',
                    onClick: function(e) {
                        alert("clicked");
                    }
                }
            };

            ko.applyBindings(viewModel);
        });
    </script>
</body>
</html>
